<template>
  <!-- 主页面头部展示组件 -->
  <div class="vy-theme-header">
    <div class="vy-theme-header-left">
      <mu-tooltip
        class="vy-theme-header-back"
        placement="bottom"
        content="返回"
      >
        <div @click="click_back">
          <img
            src="https://image.xuexiwangzhe.com/Fl1SdCgiW0AVfAi_JllkRShbcTfo"
            style="width:18px;"
          />
        </div>
      </mu-tooltip>
      <div class="vy-theme-header-title" :title="projectInfo.title">
        {{ projectInfo.title }}
      </div>
    </div>
    <div class="vy-theme-header-center">
      <ul class="vy-theme-header-menus">
        <li
          class="vy-theme-header-menus_item"
          :class="{ m_actived: tag == 1 }"
          @click="click_menu(1)"
        >
          主题
        </li>
        <li
          class="vy-theme-header-menus_item"
          :class="{ m_actived: tag == 2 }"
          @click="click_menu(2)"
        >
          成员
        </li>
        <li
          class="vy-theme-header-menus_item"
          :class="{ m_actived: tag == 3 }"
          @click="click_menu(3)"
        >
          设置
        </li>
        <li
          class="vy-theme-header-menus_item"
          :class="{ m_actived: tag == 6 }"
          @click="click_menu(6)"
        >
          瞬间
        </li>
        <li
          class="vy-theme-header-menus_item"
          :class="{ m_actived: tag == 4 }"
          @click="click_menu(4)"
        >
          数据
        </li>
        <li
          class="vy-theme-header-menus_item"
          :class="{ m_actived: tag == 5 }"
          @click="click_menu(5)"
        >
          报表
        </li>
      </ul>
    </div>
    <div class="vy-theme-header-right">
      <!-- <label class="labelshow">https://jinshuju.net/f/sr8w5d</label>
      <a-button type="link">
        <a-icon type="copy" />
      </a-button> -->
      <a-popover
        placement="bottomRight"
        arrow-point-at-center
        trigger="contextmenu"
        v-model="qrcodeShow"
      >
        <div slot="content" class="qr-panel">
          <mu-circular-progress
            v-show="qrcodeLoading"
            class="qr-loading"
            :size="36"
          ></mu-circular-progress>
          <img v-show="!qrcodeLoading" :src="qrImg" class="qr-img" />
          <a-button
            :href="qrImg + '?attname=学习王者.png'"
            download="学习王者"
            class="qr-btn"
            >下载二维码</a-button
          >
          <ul class="qr-select">
            <li
              class="qr-select-item"
              :class="{ 'qr-select-item-active': qrActive === 'sm' }"
              @click="qrActive = 'sm'"
            >
              小号
            </li>
            <li
              class="qr-select-item"
              :class="{ 'qr-select-item-active': qrActive === 'nm' }"
              @click="qrActive = 'nm'"
            >
              中号
            </li>
            <li
              class="qr-select-item"
              :class="{ 'qr-select-item-active': qrActive === 'lg' }"
              @click="qrActive = 'lg'"
            >
              大号
            </li>
          </ul>
        </div>
        <a-button type="link" @click="initQrcode(projectid)">
          <a-icon class="qr-select-img" type="qrcode" />
        </a-button>
      </a-popover>

      <a-button
        type="primary"
        v-if="projectInfo && projectInfo.releaseState !== 1"
        @click="publish(projectid)"
        class="publish-btn"
        >发布</a-button
      >
      <a-button
        type="primary"
        v-if="projectInfo && projectInfo.releaseState === 1"
        @click="publish(projectid)"
        class="publish-btn"
        >取消发布</a-button
      >
      <!-- <a-button type="link">
        <a-icon type="ellipsis" />
      </a-button> -->
    </div>
  </div>
</template>

<script>
import { Empty } from "ant-design-vue";
import Message from "muse-ui-message";
export default {
  name: "vy-theme-header",
  props: ["tag", "projectid", "ischild"],
  data() {
    return {
      projectInfo: {},
      qrcodeShow: false,
      qrcodeLoading: false,
      qrActive: "nm",
      qrData: {
        header: "http://image.xuexiwangzhe.com/",
        sm: "",
        nm: "",
        lg: "",
      },
    };
  },
  created() {
    this.queryInfo(this.projectid);
  },
  watch: {
    projectid(newVal, oldVal) {
      this.queryInfo(newVal);
    },
  },
  computed: {
    qrImg() {
      if (!this.qrData[this.qrActive]) {
        return Empty.PRESENTED_IMAGE_SIMPLE;
      }
      return this.qrData.header + this.qrData[this.qrActive];
    },
  },
  methods: {
    // 查询项目信息
    queryInfo(projectId) {
      const params = {
        projectId,
      };
      this.$axios
        .get("/projectSetting/getProjectSetting", { params })
        .then((res) => {
          this.projectInfo = res;
        });
    },
    initQrcode(projectId) {
      if (this.qrcodeShow === true) {
        this.qrcodeShow = false;
        this.qrcodeLoading = false;
        return;
      }
      this.qrcodeShow = true;
      this.qrcodeLoading = true;
      const params = {
        id: projectId,
      };
      this.$axios.get("/project/getMiniCode", { params }).then((res) => {
        if (res.success) {
          this.qrData.sm = res.miniCode_256;
          this.qrData.nm = res.miniCode_512;
          this.qrData.lg = res.miniCode_1024;
        } else {
          this.$message.error(res.msg);
        }
        this.qrcodeLoading = false;
      });
    },
    publish(projectId) {
      let _this = this;
      Message.confirm(
        _this.projectInfo.releaseState === 1
          ? "您确定要取消发布本项目么？"
          : "您确定要发布本项目么？",
        _this.projectInfo.releaseState === 1 ? "取消发布项目" : "发布项目",
        {
          okLabel:
            _this.projectInfo.releaseState === 1 ? "确认取消发布" : "确认发布",
          type: "info",
        }
      ).then((res) => {
        if (res.result) {
          let parms = { id: projectId };
          _this.$axios.post("/project/release", parms).then((res) => {
            console.log(res.success);
            if (res.success) {
              if (_this.projectInfo.releaseState === 1) {
                _this.$message.success("取消项目发布成功");
                _this.projectInfo.releaseState = 0;
              } else {
                _this.$message.success("项目发布成功");
                _this.projectInfo.releaseState = 1;
              }
            } else {
              _this.$message.error(res.msg);
            }
          });
        }
      });
    },
    click_menu(menuKey) {
      let urlpath = null;
      switch (menuKey) {
        case 1:
          urlpath = "./themes.html#/";
          break;
        case 2:
          urlpath = "./members.html#/";
          break;
        case 3:
          urlpath = "./settings.html#/";
          break;
        case 4:
          urlpath = "./data.html#/";
          break;
        case 5:
          urlpath = "./report.html#/";
          break;
        case 6:
          urlpath = "./moments.html#/";
          break;
        default:
          break;
      }
      if (!urlpath) {
        this.$message.info("正在研发中....");
        return;
      }
      if (this.tag != menuKey) {
        var _queryPms = new URLSearchParams(this.$route.query);
        window.location.href = urlpath + "?" + _queryPms;
      }
    },
    click_back() {
      if (this.ischild) {
        history.go(-1);
      } else {
        location.href = "index.html";
      }
    },
  },
};
</script>

<style lang="scss">
.vy-theme-header {
  display: flex;
  // border: 1px solid darkorange;
  .vy-theme-header-left {
    width: 20%;
    display: flex;
    align-items: center;
    .vy-theme-header-back {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0px 20px;
      // border: 1px solid cyan;
    }
    .vy-theme-header-title {
      font-weight: 500;
      color: rgba(1, 1, 1, 1);
      font-size: 18px;
      position: relative;
      // border: 1px solid rosybrown;
      padding: 0 20px;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .vy-theme-header-center {
    flex: 1;
    // border: 1px solid khaki;
    .vy-theme-header-menus {
      margin: 0px;
      padding: 0px;
      list-style: none;
      .vy-theme-header-menus_item {
        display: inline-block;
        font-size: 18px;
        font-weight: 500;
        color: #666666;
        padding: 0 20px;
        // height: 100%;
        text-align: center;
        cursor: pointer;
        &.m_actived {
          font-weight: 500;
          color: #000;
          position: relative;
          &::after {
            content: "";
            display: block;
            position: absolute;
            height: 5px;
            width: 20px;
            background-color: #3366ff;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%, 0);
          }
        }
      }
    }
  }
  .vy-theme-header-right {
    width: 35%;
    text-align: right;
    padding-right: 30px;
    .labelshow {
      padding: 0 10px;
      // border: 1px solid brown;
    }

    .ant-btn {
      margin-left: 5px;
      // border: 1px solid teal;
      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);
        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }
      }
    }
    .ant-btn-link {
      color: rgba(0, 0, 0, 0.65);
    }

    .qr-panel {
      text-align: center;
      padding: 22px 23px;
      width: 235px;
    }

    .qr-select-img {
      font-size: 18px;
      vertical-align: middle;
    }

    .publish-btn {
      vertical-align: middle;
    }

    .qr-img {
      width: 189px;
      margin-bottom: 19px;
    }

    .qr-loading {
      margin-bottom: 19px;
    }

    .qr-select {
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }

    .qr-btn {
      &:hover {
        background-color: #e9f0fb;
      }
      background-color: #e9f0fb;
      color: #242323;
      width: 189px;
      height: 38px;
      line-height: 38px !important;
      font-size: 14px;
      border: none;
      margin-bottom: 12px;
    }

    .qr-select-item {
      &:last-child {
        border-right: none;
      }
      display: inline-block;
      cursor: pointer;
      font-size: 13px;
      padding: 0 16px;
      color: #b0aeae;
      border-right: 1px solid #ebebeb;
    }

    .qr-select-item-active {
      color: #4587eb;
    }
  }
}
</style>
